<template>
    <span :style="spanStyle">
        <caret-up-outlined v-if="iconType === 'caret-up_up'" :rotate="rotate" :style="style" />
        <caret-down-outlined v-else-if="iconType === 'caret-up_down'" :rotate="rotate" :style="style" />
        <up-outlined v-else-if="iconType === 'up_up'" :rotate="rotate" :style="style" />
        <down-outlined v-else-if="iconType === 'up_down'" :rotate="rotate" :style="style" />
        <vertical-align-top-outlined v-else-if="iconType === 'vertical-align-top_up'" :rotate="rotate" :style="style" />
        <vertical-align-bottom-outlined
            v-else-if="iconType === 'vertical-align-top_down'"
            :rotate="rotate"
            :style="style"
        />
        <arrow-up-outlined v-else-if="iconType === 'arrow-up_up'" :rotate="rotate" :style="style" />
        <arrow-down-outlined v-else-if="iconType === 'arrow-up_down'" :rotate="rotate" :style="style" />
        <double-left-outlined v-else-if="iconType === 'rise_up'" :rotate="rotate" :style="style" />
        <double-right-outlined v-else-if="iconType === 'rise_down'" :rotate="rotate" :style="style" />
        <pause-outlined v-else />
        {{ dataText }}
    </span>
</template>
<script>
    import { computed, defineComponent } from 'vue'

    export default defineComponent({
        name: 'TrendIcon',
        props: {
            displayInfo: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            text: {
                type: [String, Number],
                default: () => {
                    return ''
                }
            }
        },
        setup(props) {
            const rotateNumber = 90
            const spanStyle = computed(() => {
                return {
                    color: style.value.color,
                    fontSize: `${props.displayInfo.fontSize}px`
                }
            })
            const style = computed(() => {
                const { greaterThanColor, equalsColor, lessThanColor } = props.displayInfo
                let color = equalsColor
                props.text > 0 && (color = greaterThanColor)
                props.text < 0 && (color = lessThanColor)
                return {
                    color
                }
            })
            const iconType = computed(() => {
                const icon = props.displayInfo.iconValue || ''
                return icon + (props.text > 0 ? '_up' : '_down')
            })
            const rotate = computed(() => {
                let number = 0
                props.text === 0 && (number = rotateNumber)
                return number
            })
            const dataText = computed(() => {
                return props.text + (props.displayInfo?.dataSuffix || '') // 文本+后缀
            })
            return {
                spanStyle,
                rotate,
                style,
                iconType,
                dataText
            }
        }
    })
</script>
